<template>
  <div class="admin-login_item6">
    <div class="item6-boxmic">
      <div class="item6-boxmic-title">用户登录</div>
      <div class="item6-boxmic-butpes">
       <i class="el-icon-user-solid"></i>
       <input class="item6-boxmic-butpes-kuant" v-model="user.username" placeholder="请输入您的用户名" />
      </div>
      <div class="item6-boxmic-butpes">
       <i class="el-icon-lock"></i>
       <input type="password" v-model="user.password" class="item6-boxmic-butpes-kuant" placeholder="请输入您的密码" />

      </div>
      <div class="item6-login-check">
        <el-checkbox class="check-remenb" v-model="checked">我已阅读《阿拉博数企业服务条款》</el-checkbox>
        <!-- <div class="check-forget"><a href="#">忘记密码?</a></div> -->
      </div>
      <div class="item6-login-buton">
        <el-button class="buton-action" @click="submit" :loading="loading">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
     data() {
       return {
         loading: false,
         checked: false,
         user: {
         	username: '',
         	password: ''
         }
       }
     },
     mounted() {
     	this.init()
     },
     methods: {
       async submit() {
         if (this.checked) {
           this.loading = true
           await this.$ala.userLogin(this.user)
           this.loading = false
           await this.$emit('afterLogin')
         } else {
           this.$alert('请勾选服务条款', '提示！', {
             confirmButtonText: '确定'
           })
         }
       }
     }
   }
</script>

<style lang="scss">
  .admin-login_item6 {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1300px;
    // display: flex;
    // flex-direction: row;
    background: url("https://diyapi.5ug.com/wwwroot/uploads/api/256-116-382/2022-02-17/620de4a5051295f55528993e.png");
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    .item6-boxmic{
      display: flex;
      flex-direction: column;
      top: 25%;
      left: 16%;
      position: absolute;
      .item6-boxmic-title {
        padding-left: 70px;
        color: #FFFFFF;
        font-size: 40px;
      }
      .item6-boxmic-butpes {
        display: flex;
        flex-direction: row;
        width: 300px;
        margin-top: 20px;
        border: 2px solid #00C0FF;
        border-radius: 5px;
        .item6-boxmic-butpes-kuant{
          outline:none;
          color: #FFFFFF;
          border-radius: 5px;
          width: 300px;
          background-color: rgba(#00C0FF,0.2);
          font-size: 14px;
          padding: 10px 10px;
          line-height: 20px;
        }
        .item6-boxmic-butpes-kuant::-webkit-input-placeholder{
           color: rgba(#ffffff,0.7);
        }
        .el-icon-user-solid{
          line-height: 35px;
          font-size: 25px;
          color: #FFFFFF;
          background-color: rgba(#00C0FF,0.2);
        }
        .el-icon-lock{
          line-height: 35px;
          font-size: 25px;
          color: #FFFFFF;
          background-color: rgba(#00C0FF,0.2);
        }
      }
      .item6-login-check{
        margin-top: 10px;
        width: 300px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .check-remenb{
          font-size: 10px;
          color: #FFFFFF;
          .el-checkbox__label {
              color: #fff !important;
              font-weight: bold;
          }
        }
        .check-remenb:hover{
          //font-size: 15px;
          color: #00C0FF;
        }
        .check-forget{
          font-size: 10px;
          color: #00B8FF;
        }
        .check-forget a{
          color: #00B8FF;
        }
        .check-forget a:hover{
          color: #FFFFFF;
        }
      }
      .item6-login-buton{
        font-size: 20px;
        width: 300px;
        margin-top: 20px;
        .buton-action {
          font-size: 20px;
          background:linear-gradient(top, #00DDFD,#3AFEBC);
          color: #ffffff;
          width: 300px;
          padding: 12px 0px;
          border-radius: 5px;
        }
      }
      .item6-login-buton span{
        font-size: 16px;
        letter-spacing:6px
      }
    }
  }
</style>
